<template>
	<view class="login">
		<view class="imgbox"><img :src="logo" alt="" /></view>
		<view class="box"><QSTabs activeColor="#3a73fe" :current="current_1" :tabs="tabs_1" width="375" @change="change($event, '1')" /></view>
		<view class="info">
			<view class="denglu" v-if="current_1 == 0">
				<view class="inputbox">
					<input class="uni-input" v-model="dl_phone" placeholder="请输入手机号码" />
					<img :src="logo" alt="" />
				</view>
				<view class="inputbox">
					<input class="uni-input" v-model="dl_password" type="password" placeholder="请输入密码" />
					<img :src="logo" alt="" />
				</view>
				<button class="btn" @click="loginBtnClick" :disabled="disabled1" type="primary">登录</button>
			</view>
			<view class="zhuce" v-if="current_1 == 1">
				<view class="inputbox">
					<input class="uni-input" v-model="phone" placeholder="请输入手机号码" />
					<img :src="logo" alt="" />
				</view>
				<view class="inputbox">
					<input class="uni-input" type="password" v-model="password" placeholder="请输入密码" />
					<img :src="logo" alt="" />
				</view>
				<view class="inputbox">
					<input class="uni-input" type="password" v-model="password1" placeholder="请确认密码" />
					<img :src="logo" alt="" />
				</view>
				<view class="inputbox">
					<input class="uni-input"  v-model="nickname" placeholder="请输入昵称" />
					<img :src="logo" alt="" />
				</view>
				<button class="btn" @click="registerBtnClick" :disabled="disabled2" type="primary">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
import logo from '../../static/logo.png';
import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
import { login, register } from '../../server/api.js';
import { baseUrl } from '../../server/api.config';
export default {
	components: {
		QSTabs
	},
	data() {
		return {
			tabs_1: ['登录', '注册'],
			current_1: 0,
			logo,
			nickname: '',
			password: '',
			password1: '',
			phone: '',
			dl_phone: '',
			dl_password: ''
		};
	},
	computed: {
		disabled1() {
			if (this.dl_phone && this.dl_password) {
				return false;
			} else {
				return true;
			}
		},
		disabled2() {
			if (this.nickname && this.password && this.password1 && this.phone) {
				return false;
			} else {
				return true;
			}
		}
	},
	methods: {
		change(index, i) {
			this['current_' + i] = index;
		},
		loginBtnClick() {
			let params = {};
			params.phone = this.dl_phone;
			params.password = this.dl_password;
			// uni.switchTab({
			// 	url: '../tabBar/index/index'
			// });
			uni.request({
				method: 'POST',
				url: baseUrl + '/api/Users/Login',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: params,
				success: function(res) {
					console.log(res)
					if (res.data.result == 1) {
						uni.switchTab({
							url: '../tabBar/index/index'
						});
						uni.setStorage({
							key: 'UserInfo',
							data: res.data,
							success: function() {
							}
						});

						plus.nativeUI.toast('登录成功！');
					} else {
						plus.nativeUI.toast(res.data.returnval);
					}
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},
		registerBtnClick() {
			console.log('11')
			let params = {};
			params.phone = this.phone;
			params.password = this.password;
			params.password_1 = this.password1;
			params.username = this.nickname;

			uni.request({
				method: 'POST',
				url: baseUrl + '/api/Users/Register',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: params,
				success: function(res) { 
					if (res.data.result == 1) {
						uni.setStorage({
							key: 'UserInfo',
							data: res.data,
							success: function() {
							}
						});
						uni.switchTab({
							url: '../tabBar/index/index'
						});
						plus.nativeUI.toast('注册成功！');
					} else {
						plus.nativeUI.toast(res.data.returnval);
					}
				},
				fail: function(err) {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="less">
.login {
	.imgbox {
		width: 100%;
		height: 400upx;
		background-color: #197aff;
		position: relative;
		img {
			width: 140upx;
			height: 140upx;
			position: absolute;
			top: 130upx;
			left: 50%;
			margin-left: -70upx;
		}
	}
}
.denglu {
	padding: 40upx;
	margin-top: 50upx;
}
.zhuce {
	padding: 40upx;
	margin-top: 50upx;
}
.inputbox {
	width: 100%;
	position: relative;
	margin-top: 60upx;
	padding-bottom: 20upx;
	border-bottom: 1upx solid #ddd;
	input {
		font-size: 28upx;
		padding-left: 100upx;
	}
	img {
		position: absolute;
		left: 20upx;
		top: 6upx;
		width: 34upx;
		height: 34upx;
	}
}

.btn {
	margin-top: 60upx;
	font-size: 32upx;
}
</style>
